<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2022-04-14 13:54:09
 * @LastEditors: younghxp
 * @LastEditTime: 2022-04-15 18:05:52
-->
<template>
  <div>
    <topTitle titleText="系统更新日志"></topTitle>
    <div class="versionUpdateDetail">
      <el-steps direction="vertical" v-if="updateList.length > 0">
        <el-step
          v-for="(item, index) in updateList"
          :class="index === 0 ? 'stepFontColorTheme' : 'color333'"
          :icon="
            index === 0
              ? 'icon iconfont iconshujutongbu'
              : 'icon iconfont icongongrenmingce'
          "
          :key="item.id"
        >
          <span
            slot="title"
            :class="index === 0 ? 'stepFontColorTheme' : 'color333'"
            >{{ item.createTime | dateHandle }}</span
          >
          <div slot="description">
            <div class="wrapBox">
              <div class="info">
                <h3 :class="index === 0 ? 'stepFontColorTheme' : 'color333'">
                  {{ item.title }}
                </h3>
                <!-- <p v-for="v in item.infoList" :key="v.id" :class="index===0?'detail stepFontColorTheme':'detail color333'">{{v.info}}</p> -->
                <div
                  style="margin-top: 10px"
                  :class="index === 0 ? 'stepFontColorTheme' : 'color333'"
                  v-html="item.content"
                ></div>
              </div>
            </div>
          </div>
        </el-step>
      </el-steps>
      <div v-else class="noVersionUpdateDetail">
        <img src="../../../static/img/noDataInfo.png" alt="" />
        暂无系统更新日志
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'versionUpdateDetail',
  data() {
    return {
      updateList: [],
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.axios.post('/api-i/distribution/list').then((res) => {
        if (!res.data.hasError) {
          this.updateList = res.data.result
          console.log(this.updateList)
        } else {
          this.$message({
            type: 'error',
            message: res.data.errorMsg,
          })
        }
      })
    },
  },
  computed: {},
}
</script>

<style lang="less" scoped>
.versionUpdateDetail {
  padding: 40px 40px 40px 160px;
  /deep/.el-step.is-vertical .el-step__title {
    position: absolute;
    left: -100px;
    top: 3px;
  }
  /deep/.el-step:last-of-type .el-step__description,
  .el-step:last-of-type .el-step__main {
    padding-right: 10% !important;
  }
  .wrapBox {
    padding: 0 20px 36px;
    margin-top: -12px;
  }
  .info {
    padding: 16px 24px;
    background-color: #f6f9ff;
    h3 {
      font-size: 16px;
      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
      font-weight: bold;
      color: #333333;
    }
    .detail {
      font-size: 14px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #666666;
      padding-left: 10px;
      margin-top: 10px;
      position: relative;
      &::before {
        content: '';
        width: 4px;
        height: 4px;
        background: #333;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
.noVersionUpdateDetail {
  img {
    display: block;
    margin: 30px auto;
  }
  text-align: center;
}

/deep/.el-step__line {
  background-color: #dbdbdb !important;
}

/deep/.el-step.is-vertical .el-step__line {
  width: 1px !important;
}
</style>
